<template>
  <div class="form-setting">
    <div class="form-side">
      <div class="menu-caption">
        <div class="caption-start">
          <i class="el-icon-box"></i>
          <span class="caption-text">环境</span>
        </div>
        <div class="caption-center"></div>
        <div class="caption-end">
          <el-dropdown size="small">
            <i class="el-icon-more"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <i class="el-icon-plus"></i>
                <span class="tree-text-menu">添加环境</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-tree :data="envList" :props="defaultProps" @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-dropdown size="small">
              <i class="el-icon-more"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleRemoveNode(data)">
                  <i class="el-icon-delete"></i>
                  <span class="tree-text-menu">删除</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </span>
      </el-tree>
      <div class="menu-caption">
        <div class="caption-start">
          <i class="el-icon-document-copy"></i>
          <span class="caption-text">模板</span>
        </div>
        <div class="caption-center"></div>
        <div class="caption-end">
          <el-dropdown size="small">
            <i class="el-icon-more"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <i class="el-icon-plus"></i>
                <span class="tree-text-menu">添加模板</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="el-icon-plus"></i>
                <span class="tree-text-menu">添加目录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-tree :data="tplList" :props="defaultProps" @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-dropdown size="small">
              <i class="el-icon-more"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleRemoveNode(data)">
                  <i class="el-icon-delete"></i>
                  <span class="tree-text-menu">删除</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </span>
      </el-tree>
      <div class="menu-caption">
        <div class="caption-start">
          <i class="el-icon-box"></i>
          <span class="caption-text">模型</span>
        </div>
        <div class="caption-center"></div>
        <div class="caption-end">
          <el-dropdown size="small">
            <i class="el-icon-more"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <i class="el-icon-plus"></i>
                <span class="tree-text-menu">添加实体</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="el-icon-plus"></i>
                <span class="tree-text-menu">添加目录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-tree :data="modelList" :props="defaultProps" @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-dropdown size="small">
              <i class="el-icon-more"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleRemoveNode(data)">
                  <i class="el-icon-delete"></i>
                  <span class="tree-text-menu">删除</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </span>
      </el-tree>
    </div>
    <div class="form-body">
      <ParamsView />
    </div>
  </div>
</template>

<script>
import ParamsView from './params.vue'

export default {
  components: {
    ParamsView
  },

  props: {
    value: {
      default () {
        return {}
      }
    }
  },

  data () {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      envList: [
        { label: '全局', value: '全局' },
        { label: '测试环境', value: '测试环境' },
        { label: '生产环境', value: '生产环境' }
      ],
      tplList: [
        { label: '请求', value: '请求' },
        { label: '响应', value: '响应' }
      ],
      modelList: [
        { label: '用户', value: 'User' },
        { label: '角色', value: 'Rule' }
      ],
      form: {},
    }
  },

  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    handleRemoveNode () {

    }
  }
}
</script>

<style lang="less" scoped>
.dialog-setting {
  /deep/.el-dialog__header {
    padding: 10px;
  }
  /deep/.el-dialog__body {
    padding: 8px;
  }
  /deep/.el-dialog__footer {
    padding: 10px;
  }
  .form-setting {
    display: flex;
  }
  .form-side {
    padding: 0 8px;
    width: 240px;
    border-right: 1px solid #DCDFE6;
  }
  .menu-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    font-weight: 700;
    cursor: pointer;
    transition-duration: 0.4s;
    &.active,&:hover {
      background: #efefef;
      color: #409EFF;
      /deep/.el-dropdown {
        display: block;
      }
    }
    .caption-text {
      padding-left: 4px;
    }
    /deep/.el-dropdown {
      display: none;
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    &.active,&:hover {
      /deep/.el-dropdown {
        display: block;
      }
    }
    .tree-text-menu {
      margin-left: 4px;
    }
    /deep/.el-dropdown {
      display: none;
    }
  }
  .form-body {
    flex: 1;
    padding: 0 8px;
  }
}
</style>